<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<style type="text/css">
			html {
				height: 100%
			}

			body {
				height: 100%;
				margin: 0px;
				padding: 0px
			}

			#map_canvas {
				height: 100%
			}

			.goBox {
				position: fixed;
				top: 86%;
				left: 0;
				width: 100%;
				height: 120px;
				line-height: 120px;
				text-align: center;
			}

			.goBox div {
				width: 180px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				background-color: #3c9cff;
				border-radius: 20px;
				margin: 0 auto;
				color: #fff;
			}
		</style>
		<script type="text/javascript"
			src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBWV3jTHOXj7c13ndr4qN2brBzFSNrZiDE&sensor=false">
		</script>
	</head>
	<body οnlοad="">
		<div id="mapBox"></div>
	</body>

	<script language="javascript" type="text/javascript">
		//初始化地图
		var mapOptions = {
		    center: new google.maps.LatLng('30.193481084820213', '120.26757818570476'),
		    zoom: 14,
		}
		var map = new google.maps.Map(document.getElementById("mapBox"), mapOptions);
		
		var allMarker=[]//点的集合
		var line //线
		
		//根据条件查询轨迹
		document.getElementById("search-btn").onclick(function(){
			//请求接口查数据
			//…………
			//注意！这里需要清除地图上一次查询的结果，即点、线
			if(allMaker.length>0){
		        allMaker.forEach(function(item){
		            item.setMap(null)
		        })
		        allLine.setMap(null)
		    }
			createLine(result)
		})
		function createLine(data){
			//模拟经纬度数据
			var data = [
			  {lng: 120.439847166581, lat: 30.2522150957202, geoPoint: "POINT(120.439847166581 30.2522150957202) "},
			  {lng: 120.451070903891, lat: 30.233663500944, geoPoint: "POINT(120.451070903891 30.233663500944) "},
			  {lng: 120.427440217306, lat: 30.2219805090391, geoPoint: "POINT(120.427440217306 30.2219805090391) "},
			  {lng: 120.421433445845, lat: 30.2303012542633, geoPoint: "POINT(120.421433445845 30.2303012542633) "},
			  {lng: 120.413733023248, lat: 30.2272511645812, geoPoint: "POINT(120.413733023248 30.2272511645812) "},
			  {lng: 120.402487014918, lat: 30.2234543093315, geoPoint: "POINT(120.402487014918 30.2234543093315) "},
			  {lng: 120.39852028727, lat: 30.2223401021754, geoPoint: "POINT(120.39852028727 30.2223401021754) "},
			  {lng: 120.394509903467, lat: 30.2207843185459, geoPoint: "POINT(120.394509903467 30.2207843185459) "},
			  {lng: 120.37207294839, lat: 30.2163453816874, geoPoint: "POINT(120.37207294839 30.2163453816874) "},
			];
			//设置中心点
			map.setCenter(new google.maps.LatLng(data[0].lat, data[0].lng))
			//线-数据集合
			var latlngArr = []
			for (var i = 0; i < data.length; i++) {
			    latlngArr[i] = new google.maps.LatLng(data[i].lat, data[i].lng);
			}
			//画线
			line = new google.maps.Polyline({
			   path: latlngArr,
			   strokeColor: "blue",
			   strokeOpacity: .8,
			   strokeWeight: 10,
			   map: map,
			});
			//中间点样式
			var style = {
			   path: google.maps.SymbolPath.CIRCLE,
			   fillColor:'#fff',//符号填充的颜色
			   fillOpacity:1,//填充的透明度,默认0
			   strokeColor:'blue',//符号边框的颜色
			   scale: 6,//缩放大小的数量
			   strokeWeight:1,//符号轮廓的粗细。默认值为scale符号的。
			};
			//起点样式
			var start = {
			   url:"../static/img/start.png",
			   //size: new google.maps.Size(11, 11),//大小
			   //origin: new google.maps.Point(0, 0),
		       //scaledSize: new google.maps.Size(0, 0),
			   anchor: new google.maps.Point(25, 40)//偏移量
			}
			//终点样式
			var end = {
			   url:"../static/img/end.png",
			   anchor: new google.maps.Point(25, 40)
			}
			//画出线上的点
			for (var i = 0; i < data.length; i++) {
			   var image ;
			   if (i==0){
			       image = start //起点
			   }else if(i==data.length-1){
			       image = end //终点
			   }else{
			       image = style //中间点
			   }
			   var marker = new google.maps.Marker({
			       position: {lat:data[i].lat, lng:data[i].lng},
			       map: map,
			       icon: image
			   });
			   clickMarker(marker,data[i])//点的点击事件，直接写在循环里的话只显示最后一个的点信息，所以要写在外面
			   allMarker.push(marker)
			}
		}
		var infowindow = new google.maps.InfoWindow();//信息窗口
		//每个marker的信息窗口
		function clickMarker(marker,data){
		   google.maps.event.addListener(marker, 'click', function () {
		       var isOnline = data.online==1 ? "在線" : "下線"
		       var content =  "<div>" +
		           "<p>車牌號："+(data.carPlateNumber||'')+"</p>" +
		           "<p>經緯度："+(data.lng||'')+"，"+(data.lat||'')+"</p>" +
		           "<p>時間："+(data.time||'')+"</p>" +
		           "<p>訂單號："+(data.orderId||'')+"</p>" +
		           "<p>訂單狀態："+(data.orderStatusDesc||'') +"</p>" +
		           "<p>司機狀態："+isOnline+"</p><div>"
		       infowindow.setContent(content)
		       infowindow.open(map, marker);//打开信息窗口
		   });
		}
		

	</script>

</html>